<template>
    <div>
        <!--导航条-->
        <div id="Tabbar">
            <span>购物车</span>
        </div>
        <div id="NoLogin" v-if="isLogin">
            <img src="static/购物车.jpg" alt="">
            <router-link to="/Myself">
                <p>购物车空空如也，请先登录· · ·</p>
            </router-link>
            
        </div>
        <div v-else id="GoodsList">
            <div v-for="(i,j) in imgs9">
                <div  class="Goods">
                    
                    <div>
                        <input type="checkbox" class="Goods-input" v-model="i.check">
                        <img :src="i.img" alt="">
                    </div>
                    <div class="Goods-content">
                        <img src="static/删除.svg" @click="delpicture(i)" class="delpicture">
                        <p>{{i.title}}</p>
                        <span  class="Goods-span">￥{{i.price}}</span>
                        
                        <span class="span">
                            
                            <span class="Goods-span1" @click="reducenumber(i)">-</span>
                            <span class="Goods-span3">{{i.number}}</span>
                            <span class="Goods-span2" @click="addnumber(i)">+</span>
                        </span>
                    </div>
                </div>
            </div>
            <div id="fixed">
                <input type="checkbox" @change="checkAll" :checked="isCheckAll()">
                <span >&emsp;合&ensp;计￥：</span>
                <span style="color:red">{{totalPrice}}</span>
                <button>去结算</button>
            </div>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '../pages/Tabbar.vue';
import {mapState} from 'vuex'
export default {
    data:function(){
        return {
            isLogin:true,
            imgs:[]
        }
    },
    methods:{
        reducenumber:function(i){
            if(i.number==1){
                return;
            }else{
                i.number--;
                this.http.get("/api/reducenumber",{
                    params:{
                        title:i.title,
                    }
                })
                .then(res=>{

                })
            }
        },
        addnumber:function(i){
            i.number++;
            this.http.get("/api/addnumber",{
                params:{
                    title:i.title,
                }
            })
            .then(res=>{

            })
        },
        delpicture:function(i){
            this.http.get("/api/delpicture",{
                params:{
                    title:i.title,
                }
            })
            .then(res=>{
                this.shouye();
            })
        },
        shouye:function(){
            var user = JSON.parse(sessionStorage.userInfo);
            this.$store.dispatch("GoodsCard",user.username);
        },
        checkAll:function(e){
            this.imgs9.forEach(function(g) {
                g.check = e.target.checked
            }, this);
        },
        isCheckAll: function () {
            return this.imgs9.every(e => {
                return e.check;
            })
        }
    },
    computed:{
        ...mapState([
            "imgs9"
        ]),
        totalPrice: function () {

            if (this.imgs9 == []) {
                return;
            }
            return this.imgs9.map(g => {
                if (!g.check) {
                    return 0;
                }
                return g.number * g.price;
            }).reduce((pre, price) => {
                return pre + price;
            }, 0)
        }
    },
    components:{
        Tabbar
    },
    mounted:function(){
        if(sessionStorage.userInfo){
            this.isLogin = false;
        };
        this.shouye();
        for(var i = 0;i<this.imgs9.length;i++){
            
        }
    }
}
</script>

<style scoped>
    #GoodsList{
        height: calc(100vh - 26vh);
        overflow-x: hidden;
        overflow-y: scroll;
    }
    #fixed{
        position: fixed;
        width: 100vw;
        height: 9vh;
        line-height: 9vh;
        border-top: solid 1px #dedede;
        background-color: white;
        
        bottom: 10vh;
        z-index: 100;
    }
    #fixed button{
        border: none;
        height: 9vh;
        width: 40vw;
        position: absolute;
        right: 0vw;
        color: white;
        background-color: #ff6347;
    }
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw;  
        text-align: center;
        line-height: 8vh;
    }
    #NoLogin img{
        width: 50vw;
        margin:20vh 30vw 0 30vw;
    }
    #NoLogin p{
        margin-left: 20vw;
    }
    #NoLogin a{
        text-decoration: none;
        color: #cd9b9b;
    }
    .Goods{
        display: flex;
        border-bottom: 1px solid #dedede;
    }
    .Goods-content{
        width: 85vw;
        height: 19vh;
        position: relative;
        padding-top: 2vh !important;
    }
    .Goods-content p{
        margin-bottom: 2vh !important;
        margin-right: 8vw !important;
    }
    .Goods-input{
        position: relative;
        left: 3vw;
        top: 6vh;
    }
    .Goods-span{

        font-size: 3.5vw;
        color: #ff6347;
    }
    .Goods-span1{
        font-size: 4vw;
        border: solid 1px #dedede;
        padding: 0 2.8vw;
        border-right: none;
        position: relative;
        left: 1.5vw;
        border-top-left-radius: 1vw;
        border-bottom-left-radius: 1vw;
        background-color: #dedede;
    }
    .Goods-span3{
        font-size: 4vw;
        border: solid 1px #dedede;
        padding: 0 4vw;
    }
    .Goods-span2{
        font-size: 4vw;
        background-color: #dedede;
        border: solid 1px #dedede;
        border-left: none;
        position: relative;
        right: 1.5vw;
        padding: 0 2vw;
        border-top-right-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
    .Goods img{
        width: 12vh;
        height: 12vh;
        margin-top: -2vh;
        margin-left: 14vw;
    }
    .Goods div:nth-of-type(2){
        padding-top: 1vh;
        padding-left: 5vw;
    }
    .Goods p{
        margin: 0;
        font-size: 3.5vw;
    }
    .delpicture{
        height: 3vh !important;
        position: absolute;
        right: -4vw;
        top: 4vh;
        color: #ff6347;
        
    }
    
</style>




